<template>
  <div>
    <div class="nav">
      <div
        style="cursor: pointer; margin-right: 10px; margin-top: 5px"
        @click="goBack"
      >
        <i
          class="el-icon-arrow-left"
          style="color: #ffffff; font-size: 20px; font-weight: bold"
        ></i>
      </div>

      <div>{{ title }}</div>
      <div style="margin-left: auto">税号：{{ taxpayerNum }}</div>
      <div style="margin-left: 20px">当前企业：{{ deptName }}</div>
      <div class="right-menu">
        <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          trigger="click"
        >
          <div class="avatar-wrapper">
            <img src="@/assets/defaultAvatar.png" class="user-avatar" />
            <i class="el-icon-caret-bottom" style="color: #fff" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleResetPwd">
              <span>重置密码</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- <img
        src="@/assets/defaultAvatar.png"
        style="width: 30px; height: 30px; object-fit: cover; margin-left: 10px"
      /> -->
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { resetUserPwd } from "@/api";

export default {
  data() {
    return {
      deptName: "",
      taxpayerNum: "",
    };
  },
  created() {
    if (localStorage.getItem("selectCompany")) {
      const company = JSON.parse(localStorage.getItem("selectCompany"));
      this.deptName = company.deptName;
      this.taxpayerNum = company.taxpayerNum;
    }
    console.log(111, this.$store);
  },
  computed: {
    title() {
      return this.$route.meta.title;
    },
  },
  methods: {
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/";
          });
        })
        .catch(() => {});
    },
    /** 重置密码按钮操作 */
    handleResetPwd() {
      this.$prompt("请输入新密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
      })
        .then(({ value }) => {
          resetUserPwd({ password: value }).then((response) => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        })
        .catch(() => {});
    },
    goBack() {
      //   this.$router.go(-1);
      // this.$router.back();
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.nav {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background: #1890ff;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  position: fixed;
  top: 0;
}
.main {
  margin-top: 50px;
}
.right-menu {
  /* margin-left: 10px; */
  /* height: 100%;
  line-height: 50px; */
  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  .avatar-container {
    margin-right: 10px;
    .avatar-wrapper {
      margin-top: 5px;
      position: relative;
      .user-avatar {
        cursor: pointer;
        width: 35px;
        height: 35px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -13px;
        top: 22px;
        font-size: 14px;
      }
    }
  }
}
</style>
